<script setup>
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref } from 'vue'
import { useUserStore } from '@/store/user'


    const data = reactive({
        menu:[
            {
                name:'系统设置',
                path:'/system',
                icon:'setting-o',
                color:'#a33'
            },
            {
                name:'新增会员',
                path:'/vip',
                icon:'gem-o',
                color:'#f00'
            },
            {
                name:'历史单据',
                path:'/soldnote',
                icon:'description',
                color:'#f00'
            },
            {
                name:'新增商品',
                path:'/newgoods',
                icon:'add-o',
                color:'#f00'
            },
            {
                name:'编辑商品',
                path:'/editgoods',
                icon:'edit',
                color:'#f00'
            },
            {
                name:'库存查询',
                path:'/inquire',
                icon:'search',
                color:'#f00'
            },
            {
                name:'标签打印',
                path:'/labelprinting',
                icon:'records',
                color:'#f00'
            },
            {
                name:'报损',
                path:'/breakage',
                icon:'close',
                color:'#f00'
            },
            {
                name:'盘点',
                path:'/check',
                icon:'apps-o',
                color:'#f00'
            },
            {
                name:'网络订单',
                path:'/onlineorders',
                icon:'desktop-o',
                color:'#f00'
            },
            {
                name:'退货',
                path:'/salesreturn',
                icon:'logistics',
                color:'#f00'
            },
            {
                name:'调货',
                path:'/thecargo',
                icon:'exchange',
                color:'#f00'
            },
        ]
    })
const userStore = useUserStore()
const username = userStore.userInfo
const time = username.reg_time?.match( /(\S*)T/)[1]
console.log(time);


const router = useRouter()

// 退出登录
const logout = function () {
    userStore.logout()
    router.push('/login')
}

// 返回上一步
const onClickLeft = function () {
    router.go(-1)
}

</script>

<template>

    <div class="menu">
        <div class="nav">
            <van-nav-bar title="功能菜单" left-text="返回" left-arrow @click-left="onClickLeft" class="nav2"
                :border="false" />
            <div style="color:teal" class="addtext">
                <van-image class="img" width="80" height="80" round="true"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                <div class="username">{{username.username}}</div>
                <div class="time">{{time}}</div>
                <button class="btn" @click="logout">交接班</button>
            </div>
        </div>

        <van-grid :column-num="3" square="true">
            <van-grid-item :icon="item.icon" :icon-color="item.color" :text="item.name" :to="item.path" v-for="item in data.menu" :key="item.path"/>
        </van-grid>
     
    </div>
</template>
<style lang="scss">
.nav {
    background-color: deepskyblue;
    height: 170px;
    text-align: center;
    padding-top: 20px;

    .addtext {
        padding: 20px 0 0 20px;
        position: relative;
    }

    .touxiang {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: aliceblue;
    }

    .username {
        width: 100px;
        height: 20px;
        position: absolute;
        top: 40px;
        left: 110px;
        color: #fff;
    }

    .time {
        width: 100px;
        height: 20px;
        position: absolute;
        top: 70px;
        left: 110px;
        color: #fff;
    }

    .img {
        position: absolute;
        left: 20px;
    }



    .btn {
        background-color: deepskyblue;
        border: none;
        position: absolute;
        right: 10px;
        top: 65px;
        color: #fff;
    }
}

.nav2 {
    background-color: deepskyblue;

    .van-nav-bar__title {
        color: #fff;
    }

    .van-nav-bar__text {
        color: #fff;
    }

    .van-icon:before {
        color: #fff;
    }
}
</style>